<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 500px;
				height: 500px;
				border: 2px solid black;
				padding: 100px;
			}

			#box>div {
				width: 100px;
				height: 100px;
				border: 2px solid black;
				float: left;
				box-sizing: border-box;
			}


		</style>
	</head>
	<body>

		<div id="box">
			
		</div>
		
	</body>
</html>
<script>
	
	var boxDiv = document.getElementById('box');
	var obj = null;
	for (var i = 0; i < 25; i++) {
		var div = document.createElement('div');
		boxDiv.appendChild(div);
	}

	boxDiv.onclick = function(e) {
		if (e.target === boxDiv) return;
		e.target.style.backgroundColor = randomColor();
		if (obj) obj.style.backgroundColor = "transparent";
		obj = e.target;
	};


	function randomNum(m, n) {
		var r = Math.floor(Math.random() * (n - m + 1) + m);
		return r;
	}

	function randomColor() {
		var r = randomNum(0, 255);
		var g = randomNum(0, 255);
		var b = randomNum(0, 255);
		var colorStr = "rgb(" + r + "," + g + "," + b + ")";
		return colorStr;
	}






</script>





